<script lang="ts" setup>
import Monitor from "./monitor.vue";
import { TabUtil } from '~/util/tab_util'
import themeManager from "~/util/theme_manager";
const theme = themeManager.getTheme()

const props = defineProps<{
  list: any[],
  activeIndex: number,
}>()

const emit = defineEmits(["close"]);

const barStyle = computed(() => {
  return {
    background: theme.getColor(1),
    "border-bottom": `1px solid ${theme.getColor(0)}`,
  };
})

const redirectIndex = computed(() => {
  const activeItem = props.list[props.activeIndex]
  let redirected = -1
  props.list.filter(item => item != null).forEach((item, index) => {
    if (redirected >= 0) {
      return
    }
    if (
      TabUtil.eqal(item, activeItem)
    ) {
      redirected = index
    }
  })
  return redirected
})

const onTab = (i: number) => {
  const selected = props.list.filter(item => item != null)[i]
  // this.$parent.tabIndex = i;
  for (let i = 0; i < props.list.length; i++) {
    if (
      TabUtil.eqal(props.list[i], selected)
    ) {
      const parent = getCurrentInstance()?.parent as any
      parent.tabIndex = i;
      return
    }
  }
}

const onClose = (i: any) => {
  emit('close', i)
  let { ctx }: any = getCurrentInstance()
  ctx.$forceUpdate()
}

</script>

<template>
  <div id="tabArea">
    <div id="tabBar" :style="barStyle">
      <div
        class="tab-item"
        v-for="(item, index) in list.filter(item => item != null)"
        :key="'tab' + index"
        :style="{ 'border-bottom-color': index == redirectIndex ? theme.getColor(3) : 'transparent' }"
        @click="onTab(index)"
      >
        <span>{{ item.title }}</span>
        <svg
          @click.stop="onClose(index)"
          class="menu-icon"
          width="128"
          height="128"
          viewBox="0 0 128 128"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <rect
            x="36.2764"
            y="26.8769"
            width="91"
            height="14"
            transform="rotate(45 36.2764 26.8769)"
            fill="#C4C4C4"
          />
          <rect
            x="26.377"
            y="91.2236"
            width="91"
            height="14"
            transform="rotate(-45 26.377 91.2236)"
            fill="#C4C4C4"
          />
        </svg>
      </div>
    </div>
    <div class="navArea">
      <div v-for="(item, index) in list.filter(item => item != null)" :key="'monitor' + index">
        <Monitor
          v-if="item.type == 'monitor'"
          v-show="index == redirectIndex"
          :active="index == redirectIndex"
          :provider="item.swap.provider"
          :graphql="item.swap.graphql"
          :scan="item.swap.scan"
          :tokenAddress="item.pair.token"
          :baseAddress="item.pair.base"
          :pairAddress="item.pair.address"
        />
        <component
          v-if="item.type == 'component'"
          :is="item.component"
          v-show="index == redirectIndex"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
#tabArea {
  flex: 1;
}

#tabBar {
  width: 100%;
  height: 48px;
  display: flex;
}

.tab-item {
  padding: 0 0.75rem;
  height: 48px;
  line-height: 48px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: 0.25s;
}

.tab-item:hover {
  background-color: #ffffff33;
}

.menu-icon {
  height: 1rem;
  width: 1rem;
  margin-left: 0.5rem;
}

.navArea {
  height: calc(100vh - 48px);
  overflow: auto;
}
</style>
